<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>品酒俱乐部</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">品酒俱乐部</h1>
		</header>
		<div class="qr_zd">
			<div class="qr_m">
				<div class="xz_adr fs_xl">
					<p class="xz_zd fs_m">请选择您想加入的品酒俱乐部区域：
						<p>
							<select class="province_select fs_m" name="province" id="province"  style="margin-bottom:0;width: 30%;color: #D82B34;float: initial;padding: 0px 5px;">
								<option value="0">请选择</option>
								<volist name="province_list" id="vo">
									<option value="{$vo.id}">{$vo.name}</option>
								</volist>
							</select>
							<select name="city" class="fs_m" id="city" style="width: 30%;color: #D82B34;float: initial;margin-bottom:0;padding: 11px 0;">
								<option value="0">请选择</option>
							</select>
							<select name="district" class="fs_m" id="district" style="width: 30%;color: #D82B34;float: initial;margin-bottom:0;padding: 11px 0">
								<option value="0">请选择</option>
							</select></p></p>
					<p class="xz_jg fs_m">您选择的区域是：<span id="cityResult3"></span></p>
				</div>
				<div class="xt_pd">
					<p class="fs_m">当前品酒俱乐部个数为<span id="station_count">0</span>，您可以...</p>
					<div class="xt_cz cls">
						<a class="xt_cj create_station"  style="pointer-events:none"><span class="fs_xl" ><em class="fs_s">我要创建</em></span></a>
						<a class="xt_jr join_station"  style="pointer-events:none"><span class="fs_xl" ><em class="fs_s">我要加入</em></span></a>
					</div>
				</div>
				<div class="xt_noc fs_xs">温馨提示：只有该区域内有品酒俱乐部才能申请加入品酒俱乐部，只有该区域内品酒俱乐部不足3个才能创建品酒俱乐部！</div>
			</div>
		</div>
		<div class="mui-content">
		</div>
		<script type="text/javascript">
			$(function(){
				$("#district").change(function(){
					$("#cityResult3").html($('#province option:selected').text()+"|"+$('#city option:selected').text()+"|"+$('#district option:selected').text());
					var district_id = $('#district option:selected').val();
					$.ajax({
						type:'POST',
						url:"/mobile/Station/get_region",
						data:{"district_id":district_id,"level":3},
						dataType:"json",
						success:function(data){
							$("#station_count").html(data.data.station_count);
							if(data.data.station_count > 2){
								$(".create_station span").removeClass("bg_red");
								$(".join_station span").addClass("bg_greed");
								$(".join_station").css("pointer-events","auto");
								$(".create_station").css("pointer-events","none");
							}else if(data.data.station_count > 0){
								$(".create_station span").addClass("bg_red");
								$(".join_station span").addClass("bg_greed");
								$(".join_station").css("pointer-events","auto");
								$(".create_station").css("pointer-events","auto");
							}else{
								$(".create_station span").addClass("bg_red");
								$(".join_station span").removeClass("bg_greed");
								$(".join_station").css("pointer-events","none");
								$(".create_station").css("pointer-events","auto");
							}
						},
					});
					
					var Num=parseInt($(".xt_pd p span").text());
					if(Num==0){
						$(".bg_greed").removeClass("bg_greed");
						$(".xt_jr").css("pointer-events","none");
					}else if(Num==3){
						$(".bg_red").removeClass("bg_red");
						$(".xt_cj").css("pointer-events","none");
					}//品酒站为空或者满了后功能禁止
				});
				
				$("#province").change(function(){
					$("#cityResult3").html($('#province option:selected').text());
					var province_id = $('#province option:selected').val();
					if(province_id > 0){
						//联动查询市
						$.ajax({
							type:'POST',
							url:"/mobile/Station/get_region",
							data:{"province_id":province_id,"level":1},
							dataType:"json",
							success:function(data){
								if(data.status == 1){
									$("#station_count").html(data.data.station_count);
									var html = '<option value="0">请选择</option>';
									$("#city").html("");
									if(data.data.region_list.length > 0){
										$.each(data.data.region_list,function(i,region){
											html += '<option value="'+region.id+'">'+region.name+'</option>';
										});
										$("#city").html(html);
										$(".create_station span").removeClass("bg_red");
										$(".join_station span").removeClass("bg_greed");
										$(".join_station").css("pointer-events","none");
										$(".create_station").css("pointer-events","none");
									}else{
										if(data.data.station_count > 2){
											$(".create_station span").removeClass("bg_red");
											$(".join_station span").addClass("bg_greed");
											$(".join_station").css("pointer-events","auto");
											$(".create_station").css("pointer-events","none");
										}else if(data.data.station_count > 0){
											$(".create_station span").addClass("bg_red");
											$(".join_station span").addClass("bg_greed");
											$(".join_station").css("pointer-events","auto");
											$(".create_station").css("pointer-events","auto");
										}else{
											$(".create_station span").addClass("bg_red");
											$(".join_station span").removeClass("bg_greed");
											$(".join_station").css("pointer-events","none");
											$(".create_station").css("pointer-events","auto");
										}
										$("#city").html("");
										$("#district").html("");
									}
								}else{
									alert(data.msg);
								}
							},
						});
					}else{
						var html = '<option value="0">请选择</option>';
						$("#city").html(html);
					}
				});
				
				$("#city").change(function(){
					$("#cityResult3").html($('#province option:selected').text()+"|"+$('#city option:selected').text());
					var city_id = $('#city option:selected').val();
					if(city_id > 0){
						//联动查询市
						$.ajax({
							type:'POST',
							url:"/mobile/Station/get_region",
							data:{"city_id":city_id,"level":2},
							dataType:"json",
							success:function(data){
								if(data.status == 1){
									$("#station_count").html(data.data.station_count);
									var html = '<option value="0">请选择</option>';
									$("#district").html("");
									if(data.data.region_list.length > 0){
										$.each(data.data.region_list,function(i,region){
											html += '<option value="'+region.id+'">'+region.name+'</option>';
										});
										$("#district").html(html);
										$(".create_station span").removeClass("bg_red");
										$(".join_station span").removeClass("bg_greed");
										$(".join_station").css("pointer-events","none");
										$(".create_station").css("pointer-events","none");
									}else{
										if(data.data.station_count > 2){
											$(".create_station span").removeClass("bg_red");
											$(".join_station span").addClass("bg_greed");
											$(".join_station").css("pointer-events","auto");
											$(".create_station").css("pointer-events","none");
										}else if(data.data.station_count > 0){
											$(".create_station span").addClass("bg_red");
											$(".join_station span").addClass("bg_greed");
											$(".join_station").css("pointer-events","auto");
											$(".create_station").css("pointer-events","auto");
										}else{
											$(".create_station span").addClass("bg_red");
											$(".join_station span").removeClass("bg_greed");
											$(".join_station").css("pointer-events","none");
											$(".create_station").css("pointer-events","auto");
										}
										$("#district").html("");
									}
								}
							},
						});
					}else{
						var html = '<option value="0">请选择</option>';
						$("#city").html(html);
					}
				});
				
				
				$(".create_station").click(function(){
					var province = $('#province option:selected').val();
					var city = $('#city option:selected').val();
					var district = $('#district option:selected').val();
					var html = "/province/"+province;
					if(city){
						html+= "/city/"+city;
					}
					if(district){
						html+= "/district/"+district;
					}
					location.href = "/mobile/station/create_station"+html+"/name/"+$("#cityResult3").html();;
				})
				
				$(".join_station").click(function(){
					var province = $('#province option:selected').val();
					var city = $('#city option:selected').val();
					var district = $('#district option:selected').val();
					var html = "/province/"+province;
					if(city){
						html+= "/city/"+city;
					}
					if(district){
						html+= "/district/"+district;
					}
					location.href = "/mobile/station/join_station"+html;
				})
			})
		</script>
	</body>

</html>